<template>
  <div class="inputsTable">
    <div class="inputsTable-toolbar">
      <div class="menu-wrapper">
        <el-menu mode="horizontal" defaultActive="1" class="dg-view-menu">
          <el-menu-item index="1">
            <el-icon>
              <platform/>
            </el-icon>
            {{ $t('wms.input-output') }}
          </el-menu-item>
        </el-menu>
        <div class="menu-right">
          <el-form :inline="true">
            <el-form-item :label="$t('wms.date')">
              <el-date-picker v-model="data.period" type="daterange" :range-separator="$t('wms.to')"
                              :start-placeholder="$t('wms.startDate')"
                              :end-placeholder="$t('wms.endDate')" format="YYYY-MM-DD"/>
            </el-form-item>
            <el-form-item :label="$t('wms.outputMaterial')">
              <el-input v-model="data.outMterialCode"/>
            </el-form-item>
            <el-form-item :label="$t('wms.inputMaterial')">
              <el-input v-model="data.inMterialCode"/>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">
                <el-icon>
                  <search/>
                </el-icon>
                {{ $t('wms.search') }}
              </el-button>
              <el-button type="info" @click="onRest">
                <el-icon>
                  <RefreshLeft/>
                </el-icon>
                {{ $t('wms.rest') }}
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="inputsTable-content">
      <div class="inputsTable-content-table">
        <el-table border :data="data.tableList" :fit="true" table-layout="fixed" header-align="center" stripe
                  style="width:100%;height: 100%;"
                  :header-cell-style="{ color: '#000', textAlign: 'center', borderColor: ' #CCC', background: '#f9f9f9' }"
                  :cell-style="{ textAlign: 'center' }">
          <el-table-column prop="putProcessCode" :label="$t('wms.putInto')"/>
          <el-table-column prop="putMaterialCode" :label="$t('wms.inputMaterial')"/>
          <el-table-column prop="putQty" :label="$t('wms.inputQty')"/>
          <el-table-column prop="outProcessCode" :label="$t('wms.outputProcess')"/>
          <el-table-column prop="outMaterialCode" :label="$t('wms.outputMaterial')"/>
          <el-table-column prop="outQty" :label="$t('wms.outputQuantity')">
            <template #default="scope">
              <el-tag effect="plain" size="large" type="warning" style="width:80px">
                {{ scope.row.outQty || $t('wms.temporarilyAbsent') }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="differenceQty" :label="$t('wms.input-output')">
            <template #default="scope">
              <el-tag effect="plain" size="large" type="danger" style="width:80px">
                {{ scope.row.differenceQty || $t('wms.temporarilyAbsent') }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="demo-pagination-block">
        <el-pagination :currentPage="data.currentPage" :page-size="data.pagesize" :page-sizes="[20, 30, 50, 100]"
                       :small="small" :disabled="disabled" :background="background"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="data.total" @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch, onMounted, defineProps, defineEmits } from 'vue'
import iconFont from '@/components/IconFont/iconFont'
import { inputOutputTotal, paperDocumentInspector } from '@/api/mesApi'

const data = reactive({
  currentPage: 1,
  pagesize: 20,
  total: 0,
  tableList: [],
  putInto: '',
  classes: 'All', // 班次
  outMterialCode: '',
  inMterialCode: '',
  period: [],
  // period: [new Date().getFullYear() + '-' + (Number(new Date().getMonth()) + 1) + '-' + new Date().getDate(), new Date().getFullYear() + '-' + (Number(new Date().getMonth()) + 1) + '-' + new Date().getDate()], // 周期
  options: []
})

const props = defineProps({
  lineCode: { type: String },
  putInto: { type: Object }
})

onMounted(() => {
  // outInput()
  setTime()
  // onSubmit()
})
// 定时执行
const setTime = () => {
  setInterval(async () => {
    await outInput()
  }, 6000)
}

// 获取班次
const paperDocument = () => {
  paperDocumentInspector({code:'ShiftTime'}).then(res => {
    data.options = []
    data.options.push({
      value: 'All',
      text: 'All'
    })
    res.data.forEach((item, index) => {
      data.options.push({
        value: item.text,
        label: item.text
      })
    })
  })
}

// 通过工序去查询
watch(() => [props.lineCode], () => {
  outInput()
})

const outInput = () => {
  inputOutputTotal({
    page: data.currentPage,
    rows: data.pagesize,
    processCode: props.lineCode,
    outMaterialCode: data.outMterialCode,
    putMaterialCode: data.inMterialCode,
    mesProduceDate: data.period[0] || '',
    mesProduceDate1: data.period[1] || ''
  }).then(res => {
    if (res.status === 200 && res.data != null) {
      data.tableList = res.data.rows
      data.total = res.data.total
    } else {
      console.log('新画面----', res)
      data.tableList = []
      data.total = 0
    }
  })
}

const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val) => {
  data.pagesize = val
  outInput()
}
const handleCurrentChange = (val) => {
  data.currentPage = val
  outInput()
}
// 给父组件传递值
const emits = defineEmits(['getChildren'])

// 查询
const onSubmit = () => {
  if (data.period[0] !== undefined && data.period[0].length === undefined) {
    data.period[0] = data.period[0].toLocaleDateString()
    data.period[1] = data.period[1].toLocaleDateString()
  }
  // 给父组件传递值
  emits('getChildren', data.period, data.outMterial, data.inMterial)
  outInput()
}

// 重置
const onRest = () => {
  data.period = []
  data.classes = ''
  data.outMterialCode = ''
  data.inMterialCode = ''
  outInput()
}
</script>

<style scoped lang="scss">
.inputsTable {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  box-sizing: border-box;
  background-color: #fff;

  &-toolbar {
    height: 50px;

    .menu-wrapper {
      position: relative;
      display: flex;

      .dg-view-menu {
        width: 100%;
        padding-left: 20px;
      }
    }

    .menu-right {
      position: absolute;
      top: 10px;
      right: 20px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  &-content {
    flex: 1;
    overflow: hidden;
    position: relative;

    &-table {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 40px;
    }

    .demo-pagination-block {
      position: absolute;
      left: 0;
      bottom: 5px;
    }
  }
}

.iconfont {
  font-size: 22px;
}
</style>
